<template>
  <div class="container">
    <el-form>
      <el-form-item>
        <el-card>
          <div class="box-container">
            <div class="left-container"></div>
            <div class="main-container"></div>
            <div class="right-container"></div>
          </div>
        </el-card>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { h } from "@/api/art.js";

import dayjs from "dayjs";
export default {
  data() {
    return {
      pageSizes: [10, 20, 30, 50, 100],
      opinion: {},
      opinionList: [
        {
          name: "学习纲要2023",
          name1: "歇后语大全",
        },
      ],
      timeList: [
        // {
        //   year: "1979年",
        //   time: "1979年1月1日",
        //   event: "1979年1月1日中国同美国正式建立外交关系。",
        //   url: "http://www.12371.cn/2018/12/17/ARTI1545002856640593.shtml",
        // },
      ],
      year: "",
      totalcount: 30,
      queryData: {
        from: 1,
        size: 10,
      },
      debounceInput: () => {},
    };
  },
  async created() {
    this.getKnowledgeList();
    let that = this;
    that.debounceInput = that.debounce(that.handleScroll, 200, false);
    window.onscroll = () => {
      that.debounceInput();
    };
  },
  mounted() {},
  watch: {
    "$route.query.topic": {
      handler(newVal, oldVal) {
        this.queryData.topic = newVal;
        if (newVal != oldVal) {
          this.getOpinion();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    // gotoPage(name) {
    //   window.open(`http://g7.guodata.com:9201/book/${name}.pdf`, "_blank");
    // },
    refresh() {
      this.year = dayjs(this.year).format("YYYY");
      this.queryData.from = 1;
      this.timeList = [];
      this.getKnowledgeList();
    },
    handleScroll() {
      return (() => {
        var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        var scrollHeight = document.body.scrollHeight;
        var clientHeight = document.documentElement.clientHeight;
        if (scrollTop + clientHeight > scrollHeight - 100) {
          this.queryData.from = this.queryData.from + 1;
          this.getKnowledgeList();
        }
      })();
    },
    add() {
      return (() => {
        console.log(1);
      })();
    },
    debounce(func, delay = 100, immediate = false) {
      //闭包
      let timer = null;

      return function () {
        if (timer) {
          clearTimeout(timer);
        }

        if (immediate && !timer) {
          func.apply(this, arguments);
        }
        timer = setTimeout(() => {
          func.apply(this, arguments);
        }, delay);
      };
    },
    async getKnowledgeList() {
      if (this.year == "Invalid Date" || this.year == null) {
        this.year = "";
        this.queryData.from = 1;
      }
      const res = await knowledgeSearch({ year: this.year, ...this.queryData });

      let temp = res.result.infos;
      this.timeList = [...this.timeList, ...temp];
    },
  },
};
</script>

<style lang="less" scoped>
.box-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  background-color: red;
  .left-container {
    width: 300px;
    height: 800px;
    background-color: #3aad88;
  }
  .main-container {

    background-color: #edeef2;
  }
  .right-container {
    width: 220px;
    height: 800px;
    background-color: #edeef2;
  }
}
</style>